<template>
  <div class="home">
    <div class="left">
      <div class="title">欢迎来到搞钱希望大平台</div>
      <div class="img"></div>
    </div>
    <div class="right">
      <div class="title">已建设专病库</div>
      <div class="list">
        <div class="list-ul" v-for="item in 4" :key="item">
          <div class="li-img">
            <img class="img" src="../../assets/images/icon.png" alt="" />
          </div>
          <div class="li-content">
            <div class="li-name">专病库专病库名称</div>
            <div class="li-man">就诊人次：134.254</div>
            <div class="li-num">病例总数：34.254</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
.home {
  display: flex;
  .left {
    flex: 1;
    border-right: 1px solid #efefef;

    .title {
      font-size: 32px;
      text-align: center;
      margin-top: 100px;
    }
    .img {
      width: 707px;
      height: 567px;
      background-image: url("@/assets/images/home.png");
      background-size: 100% 100%;
      background-position: center;
      margin: auto;
    }
  }
  .right {
    width: 405px;
    padding: 0 20px;
    .title {
      font-size: 16px;
      font-weight: bold;
      height: 40px;
      line-height: 40px;
      margin-bottom: 15px;
    }
    .list {
      .list-ul {
        display: flex;
        border: 1px solid #efefef;
        padding: 12px 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        .li-img {
          width: 120px;
          .img {
            height: 100%;
          }
        }
        .li-content {
          // display: flex;
          // flex-direction: column;
          & > div {
            // flex: 1;
            line-height: 22PX;
            font-size: 14px;
          }
          .li-name{
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
